

<template>
    <div>
        <el-container>
            <el-header class="header">

                <el-row :span="24">
                    <el-col :span="3">
                    <img :src = "imgUrl"  class="imgStyle">

                    </el-col>
                    <el-col :span="10">
                        <h1>
                            {{bxName}}
                        </h1>

                    </el-col>

                </el-row>


            </el-header>


            <el-main>

                <el-row :span="24">
                    <hr>
                </el-row>
                <el-row >
                    <el-col :span="4">
                        <el-menu id="aside" default-active="2" class="el-menu-vertical-demo" style="min-height:800px"
                                 @select="handleSelect">
                            <el-menu-item index="2"><i class="el-icon-menu"></i>故障列表</el-menu-item>
                            <el-menu-item index="1"><i class="el-icon-message"></i>提交故障</el-menu-item>
                            <el-menu-item index="3"><i class="el-icon-setting"></i>常见故障列表</el-menu-item>
                            <el-menu-item index="4"><i class="el-icon-menu"></i>上传资料</el-menu-item>
                            <el-menu-item index="5"><i class="el-icon-menu"></i>数据创建</el-menu-item>
                        </el-menu>
                    </el-col>

                    <el-col :span="20" class="main">

                        <router-view></router-view>
                    </el-col>
                </el-row>

            </el-main>
        </el-container>
    </div>
</template>

<script type="text/ecmascript-6">



    export default {
        data() {
            return {
                searchCriteria: '',
                breadcrumbItems: ['导航二'],
                bxName: ' 重庆市渝都监狱故障报修',
                imgUrl:'static/logo.png'

            }
        },



        methods: {
            handleIconClick(ev) {
                console.log(ev);

            },


            handleSelect(key, keyPath) {
                switch (key) {
                    case '1':
                        this.$router.push('/Report')
                        this.breadcrumbItems = ['提交故障']
                        break
                    case '2':
                        this.$router.push('/IssueList')
                        this.breadcrumbItems = ['故障列表']
                        break
                    case '3':
                        this.$router.push('/Normal')
                        this.breadcrumbItems = ['常见故障列表']
                        break
                    case '4':
                        this.$router.push('/Upload')
                        this.breadcrumbItems = ['资料上传']
                        break
                    case '5':
                        this.$router.push('/AddData')
                        this.breadcrumbItems = ['数据创建']
                        break
                }
            },

        },
    }
</script>

<style>

    .header {
        margin-bottom: 72px;
    }

    h1 {
        color: #0099cf;
        font-size: 60px;
        font-family: 微软雅黑;
        text-shadow: 5px 5px 5px #abf1f8;
        width: 100%;
        height: 40px;
        padding: 40px;
        letter-spacing: 2px;
        margin-top: 0px;
    / / background-color: dodgerblue;
    / / border: 2 px solid deepskyblue;


    }


    #aside {
        width: 300px;
        border: 1px solid gray;
        border-left-style: hidden;
        border-top-style: hidden;
    / / background-color: deepskyblue;
    }

    .main {

    }

    .imgStyle
    {
        width: 100%;
        height: 100%;
    }


</style>
